<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件处理-this指向</title>
	</head>
	<body>
		<h1>事件处理-this指向</h1>
		<ol>
            <li>bind方式绑定this指针，定义监听方法可以直接使用fun(){}的方式</li>
			<li>在标签上将ref与创建的Ref对象连接起来</li>
			<li>在constructor中使用this.funC=this.funC.bind(this)的方式</li>
			<li>在事件属性上使用{()=>this.funD()}的方式直接绑定</li>
        </ol>
		<hr/>
		<div id="demoReact"></div>	
        <script src="../node_modules/react/umd/react.development.js"></script>
		<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
		<script src="../node_modules/babel-standalone/babel.min.js"></script>
		<script type="text/babel">
			
			class MyCom extends React.Component {

				constructor(props) {
					super(props)
                    this.name = "my-com";
					this.funC=this.funC.bind(this)
				}

                funA() {
					console.log(this.name)
				}

				funB=()=> {
					console.log(this.name)
				}

				funC() {
					console.log(this.name)
				}

				funD() {
					console.log(this.name)
				}

                render() {
					return (
                        <div>
						    <div>我是一个类组件</div>
                            <button onClick={this.funA.bind(this)}>bind方式绑定</button>
                            
                            <button onClick={this.funB}>箭头函数的方式</button>
                            <button onClick={this.funC}>提前在constructor中绑定</button>
                            <button onClick={()=>this.funD()}>定义匿名的箭头函数</button>
                        </div>
					)
				}
            }

            ReactDOM.render(<MyCom/>,document.getElementById("demoReact"));
		</script>	
	</body>
</html>
